<template>
	<view style="padding: 20rpx 40rpx;">
		<view style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
			<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"  multiple
				:maxCount="10"></u-upload>
			<text style="font-size: 28rpx;color: #999;">(上传头像)</text>
		</view>
		<view style="display: flex;align-items: center;margin-top: 40rpx;">
			<text style="width: 180rpx;text-align-last: justify;font-size: 30rpx;">*昵称：</text>
			<u--input placeholder="请输入内容" border="surround" v-model="form.nickName" ></u--input>
		</view>
		<view style="display: flex;align-items: center;margin-top: 40rpx;">
			<text style="width: 180rpx;text-align-last: justify;font-size: 30rpx;">*真实姓名：</text>
			<u--input placeholder="请输入内容" border="surround" v-model="form.realName" ></u--input>
		</view>
		<view style="display: flex;align-items: center;margin-top: 40rpx;">
			<text style="width: 180rpx;text-align-last: justify;font-size: 30rpx;">*学号：</text>
			<u--input placeholder="请输入内容" border="surround" v-model="form.number"></u--input>
		</view>
		<view style="display: flex;align-items: center;margin-top: 40rpx;">
			<text style="width: 180rpx;text-align-last: justify;font-size: 30rpx;">*性别：</text>
			<u-radio-group v-model="form.sex" >
				<u-radio :customStyle="{width:'50%',display:'flex',justifyContent: 'center'}"
					v-for="(item, index) in radiolist" :key="index" :label="item.name" :name="item.name"
					@change="radioChange">
				</u-radio>
			</u-radio-group>
		</view>
		<view style="display: flex;align-items: center;margin-top: 40rpx;">
			<text style="width: 180rpx;text-align-last: justify;font-size: 30rpx;">*密码：</text>
			
			<u-input placeholder="请输入内容" type='password' v-if="!psType" border="surround" v-model="form.password"   >
				<template slot="suffix">
					<u-icon  name="eye" @click="showPassword"></u-icon>
				</template>
			</u-input>
			<u-input placeholder="请输入内容" type='text' v-else border="surround" v-model="form.password"   >
				<template slot="suffix">
					<u-icon  name="eye" @click="showPassword"></u-icon>
				</template>
			</u-input>
			

			
		</view>
		<view style="display: flex;align-items: center;margin-top: 40rpx;">
			<text style="width: 180rpx;text-align-last: justify;font-size: 30rpx;">*密码确认：</text>
			<u-input placeholder="请输入内容" type='password' v-if="!psType" border="surround" v-model="form.confirmPassword"   >
				<template slot="suffix">
					<u-icon  name="eye" @click="showPassword"></u-icon>
				</template>
			</u-input>
			<u-input placeholder="请输入内容" type='text' v-else border="surround" v-model="form.confirmPassword"   >
				<template slot="suffix">
					<u-icon  name="eye" @click="showPassword"></u-icon>
				</template>
			</u-input>
			
		</view>
		<view style="display: flex;flex-direction: column;margin-top: 40rpx;">
			<text style="width: 180rpx;text-align-last: justify;font-size: 30rpx;margin-bottom: 10rpx;">*个人简介：</text>
			<u--textarea v-model="form.description" placeholder="请输入内容"></u--textarea>

		</view>
		<view style="display: flex;flex-direction: column;margin-top: 40rpx;">
			<text style="width: 240rpx;text-align-last: justify;font-size: 30rpx;">上传玉兰卡照片：</text>
			<div class="" style="display: flex;justify-content: center;">
				<u-upload multiple
					:maxCount="10"></u-upload>
			</div>
		
		</view>
		<view>
			   <u-checkbox
			                :customStyle="{marginBottom: '8px'}"
			                label="已经阅并同意(微信软件服务及许可协议)"
			                name="xx"
			            />
				
		</view>
		<view>
					<u-button type="primary" text="注册" @click="handlerRegister"></u-button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				psType:false,
				form:{
							 nickName:"",
							 realName:"",
							 sex:"",
							 number:"",
							 password:"",
							 confirmPassword:"",
							 description:""
							 
				},
				radiolist: [{
						name: "男"
					},
					{
						name: "女"
					}
				]
			}
		},
		methods: {
		 handlerRegister(){
			 if(!/[\w\u4e00-\u9fa5]+/.test(this.form.nickName)){
			 	uni.showToast({
			 	title:"昵称不能为空",
			 	icon:"none",
			 	})
			 	return
			 }
			 if(!/[\w\u4e00-\u9fa5]+/.test(this.form.realName)){
			 	uni.showToast({
			 	title:"姓名不能为空",
			 	icon:"none",
			 	})
			 	return
			 }
			 if(!/[\w\u4e00-\u9fa5]+/.test(this.form.password)){
			 	uni.showToast({
			 	title:"密码不能为空",
			 	icon:"none",
			 	})
			 	return
			 }
			 if(!/[\w\u4e00-\u9fa5]+/.test(this.form.confirmPassword)){
			 	uni.showToast({
			 	title:"确认不能为空",
			 	icon:"none",
			 	})
			 	return
			 }
			 if(!/[\w\u4e00-\u9fa5]+/.test(this.form.number)){
			 	uni.showToast({
			 	title:"学号不能为空",
			 	icon:"none",
			 	})
			 	return
			 }
			 if(!/[\w\u4e00-\u9fa5]+/.test(this.form.description)){
			 	uni.showToast({
			 	title:"描述不能为空",
			 	icon:"none",
			 	})
			 	return
			 }
			 if(!/[\w\u4e00-\u9fa5]+/.test(this.form.file)){
			 	uni.showToast({
			 	title:"图片不能为空",
			 	icon:"none",
			 	})
			 	return
			 }
		 },
         showPassword(){
			 console.log(this.psType)
			 this.psType=!this.psType
		 }
		}
	}
</script>

<style>
.u-upload{
	flex: 0!important;
}
</style>